<template>
  <div :id="hasPreview ? info._id : `diy_${info._id}`" v-ui-ref="vSetRef">
    <input
      ref="input"
      v-model="text"
      :disabled="disabled"
      :focus="focus"
      :style="{
        background: info.extension.background.value,
        color: info.extension.color.value,
        'font-weight': info.extension.weight.value ? 600 : 400,
        'font-size': info.extension.size.value + 'px',
        height: `${info.extension.height.value}px`,
        'text-align': info.extension.align.value,
      }"
      @keydown="enterKey"
    />
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  import cloneDeep from 'lodash/cloneDeep'
  import { getModelInfo } from '@/ve/utils/getModelInfo'
  export default defineComponent({
    name: 'UiScanInput',
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        infoComponent: {},
        text: '',
        focus: false,
        disabled: false,
      }
    },
    watch: {
      info: {
        handler() {
          this.$nextTick(() => {
            this.infoComponent = cloneDeep(this.info)
            this.disabled = this.infoComponent.extension.disabled.value
            this.text = getModelInfo(this, this.info._id)?.data?.formData
            // console.log(getModelInfo(this, this.info._id), '123123123')
          })
        },
        deep: true,
      },
    },
    mounted() {
      this.focus = this.info.extension.focus.value
    },
    methods: {
      enterKey($event) {
        if ($event.keyCode == 13) {
          this.$refs.input.focus()
        }
      },
    },
  })
</script>
<style scoped>
  input {
    outline: none;
    display: block;
  }
  input[disabled] {
    background: rgb(157, 153, 153, 0.6) !important;
    color: #ffffff;
    cursor: not-allowed;
  }
</style>
